<!DOCTYPE html5>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
    <title>2017吉他女声&巡星计划</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div id="mask">
	<div class="spinner">
	  <div class="spinner-container container1">
	    <div class="circle1"></div>
	    <div class="circle2"></div>
	    <div class="circle3"></div>
	    <div class="circle4"></div>
	  </div>
	  <div class="spinner-container container2">
	    <div class="circle1"></div>
	    <div class="circle2"></div>
	    <div class="circle3"></div>
	    <div class="circle4"></div>
	  </div>
	  <div class="spinner-container container3">
	    <div class="circle1"></div>
	    <div class="circle2"></div>
	    <div class="circle3"></div>
	    <div class="circle4"></div>
	  </div>
	</div>
</div>
<div id="site-body">
	<section class="animated fiu" id="left">
		<a class="icon site-logo animated bounceInDown" href="/home"></a>
		<span class="icon site-star animated bounceInDown"></span>
		<a class="go animated bounceInDown" style="z-index: 99" href="https://launchpad2017.yamaha.com.cn">GO!GO!<i>>></i></a>
		<div class="site-center">
			<span class="bg1 animated bounceIn"></span>
			<span class="bg2 animated bounceIn"></span>
			<span class="icon title animated bounceIn"></span>
			<span class="icon city01 animated bounceInUp"></span>
			<span class="icon city02 animated bounceInUp"></span>
			<span class="icon city03 animated bounceInUp"></span>
			<span class="icon city04 animated bounceInUp"></span>
			<span class="icon city05 animated bounceInUp"></span>
			<span class="icon city06 animated bounceInUp"></span>
			<span class="icon city07 animated bounceInUp"></span>
			<span class="icon city08 animated bounceInUp"></span>
			<span class="icon city09 animated bounceInUp"></span>
			<span class="icon city10 animated bounceInUp"></span>
			<span class="icon city11 animated bounceInUp"></span>
			<span class="icon cloud01 animated bounceInUp"></span>
			<span class="icon cloud02 animated bounceInUp"></span>
			<span class="icon cloud03 animated bounceInUp"></span>
			<span class="icon pop pop1 animated bounceInUp">广州</span>
			<span class="icon pop pop2 animated bounceInUp">成都</span>
			<span class="icon pop pop3 animated bounceInUp">北京</span>
			<span class="icon pop pop4 animated bounceInUp">上海</span>
			<span class="icon plane animated bounceInUp"></span>
			<span class="icon star01 animated bounceInUp"></span>
			<span class="icon star02 animated bounceInUp"></span>
			<span class="icon contrail animated bounceInUp"></span>
		</div>
	</section>
	<section class="animated fiu" id="right">
		<div class="top animated bounceInDown">
			<img class="t_tb" src="images/right/p_06.png"/>
			<img class="t_tn" src="images/right/p_01.png"/>
			<img class="t_star t_star01" src="images/right/p_02.png"/>
			<img class="t_star t_star02" src="images/right/p_02.png"/>
			<img class="t_star t_star03" src="images/right/p_02.png"/>
			<img class="t_star t_star04" src="images/right/p_02.png"/>
			<img class="t_star t_star05" src="images/right/p_02.png"/>
			<img class="t_star t_star06" src="images/right/p_02.png"/>
		</div>
		<a class="go animated bounceInDown" style="z-index: 99" href="https://guitargirl2017.yamaha.com.cn">GO!GO!<i>>></i></a>
		<div class="inner">
			<div class="middle animated bounceInUp">
				<img class="m_bg animated bounceIn" src="images/right/p_18.png"/>
				<img class="m_vb1" src="images/right/p_05.png"/>
				<img class="m_vb2" src="images/right/p_08.png"/>
				<img class="m_man1 animated bounceInUp" src="images/right/p_04.png"/>
				<img class="m_man2 animated bounceInUp" src="images/right/p_03.png"/>
				<img class="m_man3 animated bounceInUp" src="images/right/p_07.png"/>
				<img class="m_mic animated bounceInUp" src="images/right/p_09.png"/>
			</div>
		</div>
	</section>
</div>
<script type="text/javascript">
	window.onload = function(){
		document.getElementById('mask').className = "active";
		document.getElementById('mask').addEventListener('animationend',function(){
			document.getElementById('mask').style.display = "none";
		});
		document.getElementById('mask').addEventListener('webkitAnimationEnd',function(){
			document.getElementById('mask').style.display = "none";
		});
		
	}
</script>
</body>
</html>